require('../../assets/css/index.less');
require('./course.less');
// 引入tabe渲染样式
let renderTabbar= require('../../xios/tabe')
// 获取ajax工具
let request= require('../../xios/axios')
// 引入navben样式
 let navbrn=require('../../xios/navbrn') 
window.onload = () => {
    renderTabbar('course')
    navbrn('course')
    const API = 'http://fitness.h5.itsource.cn:3701'
    // 获取数据
    function getData(){
       request.get('/api/train/courseList').then(res=>{
        let {errno,data}=res.data
        console.log(res.data);
          if(errno===0){
            // console.log(data[0].courseId);
            rander(data)
          }
       })
    }
    getData()
// 获取dom
let less=document.querySelector('#less')
// console.log(less);
let min=document.querySelector('#min')
// console.log(tex);
// 渲染
function rander(data){
    console.log(data);
    // 最新课程的数据
    let data1=data[0];
    console.log(data1);
    html=`
  <a href="./introduce.html?id=${data1.courseId}">
    <div class="lesson df fdc aic" id="less">
    <h3>最新课程</h3>
    <div class="lesson_box">
        <img src="${API+data1.imgurl}" alt="">
        <div  class="lesson_text">
         
                <p class="">${data1.name}</p>
                <p class="less_p2">${data1.desc}</p>
    </div>
    </div>
   </div>
  </a>
    `
    less.innerHTML=html
    const data2=data.filter((v,i)=>i !== 0)
    console.log(data2);

html2=`

     ${
        data2.map(v=>
            `
            <a href="./introduce.html?id=${v.courseId}">
            <div class="text df jcc fdc" id="tex">
            <div class="box df jcc ">
            <div class="text_box df man">
              <div class="text_man ">
                <p><span class="man_span">${v.name}</span></p>
                <p>${v.desc}</p>
              </div>
            </div>
            <img src="${API+ v.imgurl}" alt="">
           </div>
        </div>
        </a>
            `
        ).join('')}
`
min.innerHTML=html2

}

}